<template>
	<view>
		<view v-if="status=='empty'" class="loading-empty">
			<image :src="icon" mode="widthFix" :style="{...styleSet,'marginTop':marginTop}">
			</image>
			<view>{{text}}</view>
		</view>
		<uni-load-more v-else iconType="snow" :status="status" />
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue';
	const styleSet = computed(() => {
		let style = {
			'large':{
				'width':'400rpx'
			},
			'small':{
				'width':'250rpx'
			}
		}
		return style[props.size]
	});
	const props = withDefaults(
		defineProps<{
			status:string, // more/loading/noMore/empty
			icon:string,
			text:string,
			size:string,
			marginTop:string
		}>(),
		{
			status:"loading",
			icon:"https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-54.png",
			text:"暂无内容～",
			size:'large',
			marginTop:"20vh"
		}
	)
</script>

<style lang="scss" scoped>
	.loading-empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
		>image {
			width: 400rpx;
			margin: 20vh 0 60rpx;
		}
	
		>view {
			font-size: 32rpx;
			margin-bottom: 18rpx;
		}
	
	}
</style>